@import '../../../var';
@import '../../../common.wxss';

page {
  position: fixed;
  height: 100%;
  background-color: $black-color;
}
.backBottom {
  position: fixed;
  z-index: $zindex-capsule;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100rpx;
  height: 50rpx;
  padding-left: 4rpx;
}
.back-icon {
  width: 32rpx;
  height: auto;
}
.swiper-wrap {
  height: 100%;
}

.video-wrap {
  width: 100%;
  height: 100%;
  swiper {
    width: 100%;
    height: 100%;
  }
  .video {
    position: relative;
    width: 100%;
    height: 100%;
  }
}

.bottom-cover {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 33vh;
  background: linear-gradient(transparent, rgba($black-color, 0.4));
  pointer-events: none;
}

.bottom {
  position: fixed;
  bottom: $xl;
  left: $xl;
  display: flex;
  flex-direction: column;
  width: 539rpx;
  color: $bgcolor-light;

  .username {
    display: flex;
    align-items: center;
    max-width: 100%;
    margin-bottom: 23rpx;
    font-weight: 500;
    font-size: 34rpx;

    .name {
      display: inline-block;
    }

    .icon {
      width: 34rpx;
      height: 34rpx;
      margin-right: 8rpx;
      margin-left: 21rpx;
    }

    .desc {
      max-width: 13em;
      height: 1.23em;
      font-size: 22rpx;
      transform: translateY(3rpx);
    }
  }

  .content {
    font-size: 30rpx;
  }
  .feeds {
    width: 100rpx;
    height: 60rpx;
    margin-top: 29rpx;
  }
  .feed {
    display: flex;
    align-items: center;
    margin-top: 29rpx;

    .avatar {
      flex: none;
      width: 60rpx;
      height: 60rpx;
      margin-right: 19rpx;
      border-radius: 10rpx;
    }

    .topic-info {
      display: flex;
      align-items: center;

      .topic-name {
        max-width: 8em;
      }

      .button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120rpx;
        height: 48rpx;
        margin-left: 18rpx;
        padding: 0;
        color: #fff;
        font-size: 24rpx;
        line-height: 48rpx;
        background-color: $primary-color;
        border-radius: 24rpx;
        transition: color 0.4s, transform 0.6s 0.4s;

        &.already {
          color: $bgcolor-light;
          transform: scale(0);
        }
      }

      .icon {
        width: 24rpx;
        height: 24rpx;
        margin-right: 5rpx;
      }
    }
  }
}

.right {
  position: absolute;
  right: $md;
  bottom: 10vh;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90rpx;
  font-size: $font-size-small;

  cover-view {
    text-align: center;
  }
  .right-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 $xl;
    color: $bgcolor-light;
    font-size: $font-size-small;
    background-color: transparent;
    &:first-child {
      height: 130rpx;
    }

    .avatar {
      box-sizing: border-box;
      width: 90rpx;
      height: 90rpx;
      border: 4rpx solid $bgcolor;
      border-radius: 100rpx;
    }

    .follow-btn {
      position: relative;
      top: -16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40rpx;
      height: 40rpx;
      padding: 0;
      color: $primary;
      background-color: $bgcolor;
      border: 2rpx solid currentColor;
      border-radius: 40rpx;

      .plus {
        font-weight: bold;
        font-size: $font-size-small;
        line-height: 40rpx;
        vertical-align: bottom;
      }
    }

    .side-icon {
      display: block;
      width: 60rpx;
      height: 53rpx;
      margin-bottom: 6rpx;
    }

    .text {
      line-height: 1.2;
    }
  }
}
